<template>
  <div id="admin-manage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <el-form class="form" :inline="true" ref="form" :model="formData">
          <el-form-item label="订单编号" prop="orderId">
            <el-input v-model.trim="formData.orderId" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model.trim="formData.userName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="userPhone">
            <el-input v-model.trim="formData.userPhone" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="购买时间">
            <el-date-picker v-model="formData.time" type="datetimerange" :picker-options="pickerOptions"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>
    <div class="wrapper main-card">
      <el-table :data="pageData" style="width: 100%" :stripe="true">
        <el-table-column prop="orderId" label="订单号"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="userPhone" label="电话号"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="goodsNumber" label="购买数量"></el-table-column>
        <el-table-column prop="totalMoney" label="应付金额"></el-table-column>
        <el-table-column prop="userAddress" label="收货地址"></el-table-column>
        <el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
        <el-table-column label="付款状态">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.paystate === 0 ? '未付款' :
                  scope.row.paystate === 1 ? '已付款' :
                    scope.row.paystate === 2 ? '待退款' :
                      scope.row.paystate === 3 ? '已退款' : '未知状态'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.state === '0' ? '待付款' :
                  scope.row.state === '1' ? '待发货' :
                    scope.row.state === '2' ? '待收货' :
                      scope.row.state === '3' ? '已完成' : '未知状态'
              }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column type="selection" width="55" /> -->
        <!-- 操作列 -->
        <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="primary" size="small">
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <div class="button-wrapper">
        <el-button @click="handleReceiveOrder(scope.row.id)" type="primary">一键收单</el-button>
      </div> -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { searchwaitorderlist } from '@/api/pcclinet'

export default {
  name: 'RoomInfo',
  data() {
    return {
      currentPage: 1,
      pageData: [],
      total: '',
      pageSize: 10,
      dialogVisible: false,
      formData: {
        orderId: '',
        userName: '',
        userPhone: '',
        time: []
      },
      modifydata: {},
      tableData: [],
      currentRow: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },

  methods: {
    // Method for pagination
    queryByPage() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      return this.tableData.slice(start, end)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageData = this.queryByPage()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.pageData = this.queryByPage()
    },

    // Search button click handler
    handleSubmitClick() {

      const { orderId, userName, userPhone, time } = this.formData;
      const params = {};

      if (orderId) params.orderId = orderId;
      if (userName) params.userName = userName;
      if (userPhone) params.userPhone = userPhone;
      if (time.length) {
        params.strTime = time[0].toISOString();
        params.endTime = time[1].toISOString();
      }

      //  console.log(params);

      searchwaitorderlist(params).then(res => {
        if (res.success) {
          //  console.log(res.data);
          this.tableData = res.data;
          this.pageData = this.queryByPage();
          this.total = res.data.length;
        }
      });
    }
  },

  mounted() {
    searchwaitorderlist().then(res => {
      if (res.success) {
        this.tableData = res.data;
        this.pageData = this.queryByPage();
        this.total = res.data.length;
      }
    })
  }
}
</script>


<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-wrapper {
  margin-top: 40px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.form-item-wrapper {
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.image-preview {
  max-width: 100px;
  max-height: 50px;
}

.button-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
